<template>
  <div>
      <h1>User</h1>
      <Button type="primary" @click="addData" ><Icon type="plus-round"></Icon>&nbsp;添加</Button>&nbsp;&nbsp;
      <Button type="primary" @click="getData"><Icon type="refresh"></Icon>&nbsp;刷新</Button>&nbsp;&nbsp;
      <Button type="error" @click="deleteData" ><Icon type="android-delete"></Icon>&nbsp;删除</Button>
      <Input  icon="ios-search" v-model="filter.name" placeholder="请输入..." style="width: 200px" @on-click="searchitem"></Input>
      <br/><br/>
        <Modal v-model="modal1" title="添加用户">
           <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            <FormItem label="姓名" prop="name">
                <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
            </FormItem>
            <FormItem label="密码" prop="password">
                <Input v-model="formValidate.password" type="password" placeholder="请输入密码"></Input>
            </FormItem>
            <FormItem label="邮箱" prop="email">
                <Input v-model="formValidate.email" placeholder="请输入邮箱"></Input>
            </FormItem>
            <FormItem label="选择日期">
                <Row>
                    <Col span="11">
                        <FormItem prop="date">
                            <DatePicker type="date" placeholder="选择日期" v-model="formValidate.date"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="2" style="text-align: center">-</Col>
                    <Col span="11">
                        <FormItem prop="time">
                            <TimePicker type="time" placeholder="选择时间" v-model="formValidate.time"></TimePicker>
                        </FormItem>
                    </Col>
                </Row>
            </FormItem>
            <FormItem label="介绍" prop="message">
                <Input v-model="formValidate.message" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')" >提交</Button>
                <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
            </FormItem>
        </Form>
       
        </Modal>
      <Table :columns="columns1" border  ref="selection" :data="list" @on-selection-change="chose"></Table><br/>
      <Button @click="handleSelectAll(true)">设置全选</Button>
        <Button @click="handleSelectAll(false)">取消全选</Button><br/><br/>
       <Page :total="filter.total" :current="filter.page" show-elevator :page-size="filter.limit" @on-change="changepage" placement="top" show-sizer @on-page-size-change="onPageSizeChange"></Page><br/><br/>
       
  </div>
</template>
<script>
import sha256 from 'crypto-js/sha256';
import Base from '../common/Base.js';
export default {
        mixins:[Base],
        data () {
            return {
                module:'users',
                search:'',
                selection:[],
                formValidate: {
                    name: '',
                    password:'',
                    date:'',
                    email: '',
                    city: '',
                    gender: '',
                    interest: [],
                    time: '',
                    message: ''
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '姓名不能为空', trigger: 'blur' }
                    ],
                    password:[
                        { required: true, message: '密码不能为空', trigger: 'blur' },
                        { type: 'string', min: 6, message: '密码不能少于6位', trigger: 'blur' }
                    ],
                    email: [
                        { required: false, message: '邮箱不能为空', trigger: 'blur' },
                        { type: 'string', message: '邮箱格式不正确', trigger: 'blur' }
                    ],
                    date: [
                        { required: true, type: 'date', message: '请选择日期', trigger: 'change' }
                    ],
                    message: [
                        { required: true, message: '请输入个人介绍', trigger: 'blur' },
                        { type: 'string', min: 5, message: '介绍不能少于5字', trigger: 'blur' }
                    ]
                },
                
                columns1: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '用户名',
                        key: 'name'
                    },
                    {
                        title: '密码',
                        key: 'password'
                    },
                    {
                        title: 'E-mail',
                        key: 'email'
                    },
                    {
                        title: 'Date',
                        key: 'date'
                    },
                    {
                        title: '信息',
                        key: 'message'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 155,
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.editmode=true;
                                            this.editData(params.row._id);
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.removeData(params.row._id,params.index);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ]
            }
        },
        
        methods:{
            
            // changepage(page){
            //     console.log(page);
            // this.$http.post('http://localhost:3000/users/list',{page:page}).then((response) => {
            //      this.data1=response.data.rows;
            //      console.log(response.data);
            //     })
            // },
            //
            // addData(){
                
            //     this.modal1=true;
            //     this.editmode=false;
            //     this.handleReset('formValidate');
            // },
            // removeData(id,index){
            //     this.$http.delete('http://localhost:3000/users/data/'+id).then((response) => {
            //         this.data1.splice(index, 1);
            //         this.getData();
            //     })

            // },
            // deleteData(){
                
            //     this.selection.forEach(function(element) {
            //          this.$http.delete('http://localhost:3000/users/data/'+element._id).then((response) => {
                       
            //         })
            //     }, this);
            //     this.getData();
            //     //this.filter.page=page;
            // },
            // editData(id){
            //     this.id=id;
            //     this.$http.post('http://localhost:3000/users/data/'+id).then((response) => {
            //         this.formValidate=response.data;
            //         this.modal1=true;
                    
            //     })
            // },
            // handleSubmit (name){
            //     var page=this.filter.page;
            //     this.$refs[name].validate((valid) => {
            //         if (valid) {
            //             if(this.editmode){
            //                 this.$http.post('http://localhost:3000/users/data/'+this.id,this.formValidate).then((response) => {
            //                     this.modal1=false;
            //                     this.$Message.success('提交成功!');
            //                     this.getData();
            //                     this.filter.page=page;
            //                     this.id='';
            //                 })
            //             }else{
            //                 delete this.formValidate._id
            //                 this.$http.post('http://localhost:3000/users/data',this.formValidate).then((response) => {
            //                     this.modal1=false;
            //                     this.$Message.success('提交成功!');
            //                     this.getData();
            //                     this.filter.page=page;
            //                 })
            //             }
                        
                        
            //         } else {
            //             this.$Message.error('表单验证失败!');
            //         }
            //     })
            // },
            // handleReset (name) {
            //     this.$refs[name].resetFields();
            // },
            // show (index) {
            //     this.$Modal.info({
            //         title: '用户信息',
            //         content: `姓名：${this.data1[index].name}<br><br>Email:${this.data1[index].email}<br><br>Message:${this.data1[index].message}`
            //     })
            // },
            handleSelectAll (status) {
                this.$refs.selection.selectAll(status);
            },
            // chose(selection,row){
            //     this.selection=selection;
            //    //console.log(this.selection);
            // },
            // searchitem(){
            //     var newarr=[];
            //     var newarr2=[];
            //     this.data1.forEach(element=> {
            //         for(var i in element)
            //         {
            //             if(element[i]==this.search)
            //             {
            //                 newarr.push(element);
            //             }
                        
            //         }
            //     }, this);
            //     newarr.forEach(function(element) {
            //         var str='';
            //         for(var j in element){
            //             str+=j+":"+element[j]+" ";
            //         }
            //         alert(str);
            //     }, this);
            // }
        }
    }
</script>